import { Avatar } from 'antd';
import { UserOutlined } from '@ant-design/icons';
import cls from 'classname';
import './message.less';

interface MessageProps {
  text: string;
  username: string;
  onRight: boolean;
  
}

export function Message(props: MessageProps) {
  function renderContent() {
    const content = [
      <div className='message'>
        <div className="messageUser">{props.username}</div>
        <div className={'messageWrap'}>{props.text}</div>
      </div>,
      <Avatar shape="square" size="large" icon={<UserOutlined />} />
    ];

    return props.onRight ? content : content.reverse();
  }
  return (
    <div
      className={cls('messageOnRight', {
        ['messageOnLeft']: !props.onRight
      })}
    >
      {renderContent()}
    </div>
  );
}
